<template>
  <div class="playliststyle">
    <div>
      <el-popover
        placement="bottom-start"
        :popper-class="allplaylist"
        width="700"
        ref="popover"
      >
        <el-button class="all-btn" plain round @click="allClick">{{
          all.name
        }}</el-button>
        <div class="playlist-box ">
          <!-- 语言 -->
          <div>
            <div class="playlist-item">
              <div class="playlist-left">
                <h2><i class="iconfont icon-quanqiu"></i>语言</h2>
              </div>
              <div class="playlist-right">
                <ul>
                  <li
                    :style="{
                      color: item.name == upactiveText ? themeColor : ''
                    }"
                    v-for="(item, index) in languages"
                    :key="index + 'one'"
                    @click="onlabelClick(item.name)"
                    @mouseover="upActive(item.name)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
            <!-- 风格 -->
            <div class="playlist-item">
              <div class="playlist-left">
                <h2><i class="iconfont icon-yinle2"></i>风格</h2>
              </div>
              <div class="playlist-right">
                <ul>
                  <li
                    :style="{
                      color: item.name == upactiveText ? themeColor : ''
                    }"
                    v-for="(item, index) in musicstyle"
                    :key="index + 'two'"
                    @click="onlabelClick(item.name)"
                    @mouseover="upActive(item.name)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
            <!-- 场景 -->
            <div class="playlist-item">
              <div class="playlist-left">
                <h2><i class="iconfont icon-kafei1"></i>场景</h2>
              </div>
              <div class="playlist-right">
                <ul>
                  <li
                    :style="{
                      color: item.name == upactiveText ? themeColor : ''
                    }"
                    v-for="(item, index) in scenario"
                    :key="index + 'three'"
                    @click="onlabelClick(item.name)"
                    @mouseover="upActive(item.name)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
            <!-- 情感 -->
            <div class="playlist-item">
              <div class="playlist-left">
                <h2><i class="iconfont icon-qinggan"></i>情感</h2>
              </div>
              <div class="playlist-right">
                <ul>
                  <li
                    :style="{
                      color: item.name == upactiveText ? themeColor : ''
                    }"
                    v-for="(item, index) in emotional"
                    :key="index + 'four'"
                    @click="onlabelClick(item.name)"
                    @mouseover="upActive(item.name)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
            <!-- 主题 -->
            <div class="playlist-item">
              <div class="playlist-left">
                <h2><i class="iconfont icon-huatizhuti"></i>主题</h2>
              </div>
              <div class="playlist-right">
                <ul>
                  <li
                    :style="{
                      color: item.name == upactiveText ? themeColor : ''
                    }"
                    v-for="(item, index) in playtheme"
                    :key="index + 'five'"
                    @click="onlabelClick(item.name)"
                    @mouseover="upActive(item.name)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div
          class="all-label"
          slot="reference"
          @click="alllabelClick"
          :title="labelname"
        >
          {{ labelname !== "" ? labelname : "全部" }}
          <i class="el-icon-arrow-right"></i>
        </div>
      </el-popover>
    </div>
    <!-- 热门标签 -->
    <div class="hotlabel">
      <span
        class="hot-item"
        :style="[{ color: labelname == item ? themeColor : '' }]"
        v-for="(item, index) in hotlabel"
        :title="item"
        :key="index + 'hot'"
        @click="hotLabel(item, index)"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script>
import { getcatlist, gethot } from "@/api/playlist.js";
export default {
  name: "",
  components: {},
  props: {
    themeColor: {
      type: String
    }
  },
  data() {
    return {
      alllabel: false,
      allplaylist: "allplaylist", // 主题类
      categories: "", //主题分类
      all: "",
      languages: [], // 语言
      musicstyle: [], // 风格
      scenario: [], // 场景
      emotional: [], // 情感
      playtheme: [], // 主题
      hotlabel: ["全部"], //热门
      hotindex: "",
      labelname: "全部",
      upactiveText: ""
    };
  },
  computed: {},
  watch: {
    $route() {
      this.labelname = this.$route.query.cat;
    }
  },
  created() {
    // 获取歌单分类
    this.getcatlist();
    // 获取热门歌单分类
    this.gethot();
    this.labelname =
      this.$route.query.cat !== undefined ? this.$route.query.cat : "全部";
  },
  mounted() {},
  methods: {
    // 主题
    alllabelClick() {
      this.alllabel = !this.alllabel;
    }, // 获取歌单分类
    async getcatlist() {
      const { data } = await getcatlist();
      this.categories = data.categories;
      this.all = data.all;
      data.sub.forEach(val => {
        if (val.category == 0) {
          this.languages.push(val);
        }
        if (val.category == 1) {
          this.musicstyle.push(val);
        }
        if (val.category == 2) {
          this.scenario.push(val);
        }
        if (val.category == 3) {
          this.emotional.push(val);
        }
        if (val.category == 4) {
          this.playtheme.push(val);
        }
      });
    },
    // 获取热门歌单分类
    async gethot() {
      const { data } = await gethot();
      data.tags.forEach(val => {
        this.hotlabel.push(val.name);
      });
    },
    // 热门标签
    hotLabel(name, index) {
      this.hotindex = index;
      this.labelname = name;
      this.$router.push({
        path: "/discover/playlist",
        query: {
          cat: name
        }
      });
      this.title();
    }, // 全部标签
    onlabelClick(name) {
      this.labelname = name;
      this.title();
      this.$router.push({
        path: "/discover/playlist",
        query: {
          cat: name
        }
      });
      this.$refs.popover.doClose();
    },
    allClick() {
      this.hotindex = 0;
      this.labelname = "全部";
      this.$router.push({
        path: "playlist",
        query: {
          cat: "全部"
        }
      });
      this.title();
      this.$refs.popover.doClose();
    },
    upActive(name) {
      this.upactiveText = name;
    },
    title() {
      document.title = this.labelname + "歌单" + " - 音乐盒";
    }
  }
};
</script>

<style lang="scss">
.playliststyle {
  display: flex;
  justify-content: space-between;
}
.el-popover {
  width: 50rem;
}
.playlist-box {
  .playlist-item {
    display: flex;
    margin-top: 1.25rem;
    .playlist-left {
      width: 5rem;
      // display: flex;
      // align-items: center;
      h2 {
        width: 6.25rem;
        height: 1.875rem;
        line-height: 1.875rem;
        color: #a2a2a2;
        .iconfont {
          vertical-align: middle;
          padding-right: 0.3125rem;
          font-size: 1.25rem;
        }
      }
    }
    .playlist-right {
      ul {
        //  width: 75%;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 0;
        li {
          width: 4.6875rem;
          height: 2.1875rem;
          line-height: 2.1875rem;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
.all-label {
  width: 5rem;
  height: 1.5625rem;
  border-radius: 1.25rem;
  line-height: 1.5625rem;
  border: 0.0625rem solid #a2a2a2;
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
  padding: 0.0625rem 0.3125rem;
  overflow: hidden;
}
.all-label:hover {
  background: rgba($color: #e6e6e6, $alpha: 0.5);
}
.hotlabel {
  display: flex;
  span {
    //  width: 5rem;
    //  height: 1.875rem;
    //  line-height: 1.875rem;
    text-align: center;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.3125rem 0.625rem;
  }
}
</style>
